<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { addTeam, getDetail, getPage as getTeamPage, SearchTeam, Team, TeamForm, updateTeam } from '../../../api/team'

interface Option {
  key: number
  label: string
  initial: string
}

const pros = defineProps({
  onSearch: {
    type: Function,
    default: null
  }
})
onMounted(() => {

})
const dialogVisible = ref(false)

const form = ref<TeamForm>({
  id: '',
  teamName: '',
  parentId: '1',
  maxUserNum: 1,
  status: 1,
  appIds: []
})
const title = ref('')
const isAdd = ref(true)

const showForAdd = () => {
  loadTeamList()
  // 清空表单
  form.value = {
    id: '',
    teamName: '',
    parentId: '1',
    maxUserNum: 1,
    status: 1,
    appIds: []
  }
  title.value = '添加团队信息'
  dialogVisible.value = true
  isAdd.value = true
}
const showForEdit = (teamId: string) => {
  loadTeamList()
  getDetail(teamId).then(res => {
    console.log(res)
    form.value = res
    title.value = '修改团队信息'
    dialogVisible.value = true
    isAdd.value = false
  })
}
const teamList = ref<Team[]>([])
const loadTeamList = () => {
  const p: SearchTeam = { page: 1, pageSize: 999, teamName: '' }
  getTeamPage(p).then(res => {
    teamList.value = res.list
  })
}

const clickSubmitBut = () => {
  if (isAdd.value) {
    addTeam(form.value).then(res => {
      dialogVisible.value = false
      pros.onSearch()
    })
  } else {
    updateTeam(form.value).then(res => {
      dialogVisible.value = false
      pros.onSearch()
    })
  }
}
const handleCloseForAdd = (done: () => void) => {
  ElMessageBox.confirm('关闭窗口将清空输入的内容，确认关闭吗?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const generateData = () => {
  const data: Option[] = []
  const states = [
    'California',
    'Illinois',
    'Maryland',
    'Texas',
    'Florida',
    'Colorado',
    'Connecticut '
  ]
  const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
  states.forEach((city, index) => {
    data.push({
      label: city,
      key: index,
      initial: initials[index]
    })
  })
  return data
}

const data = ref<Option[]>(generateData())

const filterMethod = (query: string, item: { initial: string; }) => {
  return item.initial.toLowerCase().includes(query.toLowerCase())
}

defineExpose({
  showForAdd,
  showForEdit
})

</script>
<template>
  <el-dialog
      v-model="dialogVisible"
      :before-close="handleCloseForAdd"
      :title="title"
      width="60%"
  >
    <el-form :model="form" label-width="120px">
      <el-form-item label="团队名称">
        <el-input v-model="form.teamName" class="form-input"/>
      </el-form-item>
      <el-form-item label="上级团队">
        <el-select v-model="form.parentId" filterable placeholder="please select your zone">
          <el-option v-for="item in teamList" :key="item.id" :label="item.teamName" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="最大用户数">
        <el-input-number v-model="form.maxUserNum" :max="100" :min="1"/>
        <span>可支配最大剩余用户数100</span>
      </el-form-item>
      <el-form-item label="团队状态">
        <el-radio-group v-model="form.status">
          <el-radio :label=1>正常</el-radio>
          <el-radio :label=2>冻结</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="可用应用">
        <el-transfer
            v-model="form.appIds"
            :data="data"
            :filter-method="filterMethod"
            filter-placeholder="State Abbreviations"
            filterable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="clickSubmitBut">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>

<style scoped>
.form-input {
  width: 350px;
}
</style>
